<template>
	<view class="member">
		<view class="title">
			成员
		</view>
		<view class="conduct">
			<view class="card" v-for="(item,index) in members" :key="item.id" @click="handleClick(item.id)"
				:class="{ clicked: clicked === item.id }">
				<image class="photo" :src="item.avatar"></image>
				<text class="h1">{{ item.nickName }} | {{ posts(item.status) }}</text>
				<view class="h2">{{ item.duty }} | {{ item.age }}岁</view>
				<view class="p" v-if="clicked === item.id ">{{ item.description }}</view>
				<view class="a" v-if="clicked === item.id" @click.prevent="moreMember(item.id)">了解更多</view>
				<!--  -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMembers
	} from '../../api/MemberPage/index.js'
	export default {
		onLoad() {
			getMembers().then(res => {
				console.log(res)
				this.members = res.data
			})
		},
		data() {
			return {
				clicked: '',
				members: []
			};
		},
		methods: {
			handleClick(cardId) {
				this.clicked = cardId
			},
			moreMember(id){
				console.log('前往详情页面')
				uni.navigateTo({
						url: '../member/MemberDetail/MemberDetail?id=' + id
				});
			}
		},
		computed:{
			posts(){
				return function(res){
					if(res === 0){
						return '队长'
					}else if(res === 1){
						return '副队长'
					}else if(res === 2){
						return '核心成员'
					}else{
						return '正式成员'
					}
				}
			}
		}
	};
</script>

<style scoped>
	.member {
		width: 100%;
	}

	.title {
		font-size: 44rpx;
		font-weight: 600;
		text-align: center;
		color: rgba(0, 0, 0, 0.8);
		margin-right: 20rpx;
	}

	.conduct {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
	}

	.card {
		position: relative;
		width: 600rpx;
		height: 900rpx;
		margin: 40rpx;
		background-color: #7591AD;
		border-radius: 40rpx;
		box-shadow: 0 0 60rpx #2c2c2c;
		overflow: hidden;
		cursor: pointer; // 添加鼠标指针样式
	}

	.photo {
		position: relative;
		/* 添加此行代码 */
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		overflow: hidden;
		transition: 0.5s;
	}

	.photo::before {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		background-image: linear-gradient(to top, #333, transparent);
		transition: 0.5s;
		top: 0;
		/* 添加此行代码 */
		left: 0;
		/* 添加此行代码 */
		border-radius: inherit;
		/* 添加此行代码 */
	}

	.card.clicked .photo::before {
		display: none;
	}

	.photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.card.clicked .photo {
		display: block;
		width: 240rpx;
		height: 240rpx;
		margin: 100rpx auto 0rpx auto;
		/* 添加此行代码 */
		border-radius: 50%;
		box-shadow: 0 0 40rpx #111;
	}

	.h1 {
		position: absolute;
		bottom: 20rpx;
		left: 50%;
		width: 100%;
		transform: translateX(-50%);
		transition: 0.5s;
		text-align: center;
		font-size: 48rpx;
		font-weight: bold;
	}


	.card.clicked .h1 {
		bottom: auto;
		/* 添加此行代码 */
		margin-top: 60rpx;
		/* 修改为 margin-top */
	}

	.h2 {
		width: 100%;
		font-weight: bold;
		text-align: center;
		font-size: 36rpx;
	}

	.card.clicked .h2 {
		margin-top: 140rpx;
		/* 修改为 margin-top */
	}

	.p {
		display: block;
		width: 90%;
		text-align: left;
		text-indent: 2em;
		font-size: 32rpx;
		padding: 0 47rpx;
		margin: 40rpx auto 50rpx auto;
		line-height: 60rpx;
	}

	.a {
		display: block;
		width: 360rpx;
		margin: 20rpx auto;
		padding: 24rpx 72rpx;
		text-align: center;
		color: #e8f6fd;
		text-decoration: none;
		border: 4rpx solid #86a3b3;
		border-radius: 16rpx;
		transition: 0.3s;
		font-size: 36rpx;
	}

	.a:hover {
		background-color: #86a3b3;
	}
</style>